<template>
  <div class="page">
    <div class="table-box">
      <el-table :data="tableData" style="width: 100%"  height="calc(100% - 40px)">
        <el-table-column prop="dataDate" fixed label="日期" width="120"/>
        <el-table-column prop="channelName" label="渠道"/>
        <el-table-column prop="totalAmount" label="总金额"/>
        <el-table-column prop="orderCount" label="订单量"/>
        <el-table-column prop="payUserCount" label="支付用户数"/>
        <el-table-column prop="newMemberCount" label="会员数"/>
        <el-table-column prop="newPlusMemberCount" label="plus会员数"/>
        <el-table-column prop="newProMemberCount" label="pro会员数"/>
        <el-table-column prop="perUserAmount" label="客单金额"/>
        <el-table-column prop="perOrderAmount" label="笔单金额"/>
        <el-table-column prop="commissionAmount" label="提成金额"/>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import {onMounted, onBeforeUnmount, ref} from "vue";
import api from '../../api/index.js'

const tableData = ref([])
const getChannelData = async () => {
  try {
    const res = await api.getChannelReportData()
    if (res.data && res.data.length) {
      tableData.value = res.data
    }
  } catch(e){}
}
getChannelData()
</script>

<style scoped lang="scss">
.page,.table-box{
  position: relative;
  height: 100%;
}
</style>
